<template>
    <div>
        <!-- 面包屑路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card class="box-card">
            <!-- 搜索和添加组件区域 -->
            <el-row :gutter="20" >
                <el-col :span="9" >
                    <el-input
                    style="width:250px"
                    placeholder="请输入内容"
                    v-model="searchName"
                    class="input-with-select"
                    clearable
                    @clear="getGoodsList"
                    @input="getGoodsList">
                        <el-button slot="append" icon="el-icon-search" @click="searchUsers" ></el-button>
                    </el-input>
                     <el-switch
                      v-model="searchSaleable"
                      @change="getGoodsList"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="上架"
                      inactive-text="下架">
                    </el-switch>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible = true" >添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表区域 -->
            <el-table
                :data="usersList"
                style="width: 100%"
                stripe
                size = 'medium'
                @expand-change="expand_sku"
                >
                <el-table-column type="expand">
                  <template slot-scope="props">
                     <el-table
                     size = 'small '
                      :data="props.row.skuList"
                      style="width: 90%;left: 50px;top:-20px">
                        <el-table-column
                        prop="id"
                        label="SKU编号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        v-for="(itemsku,indexsku) in props.row.skuList[0].specParamVO"
                        :key="indexsku"
                        :prop="itemsku.id + ''"
                        :label="itemsku.name">
                        </el-table-column>
                        <el-table-column
                        prop="images"
                        label="商品图片"
                        width="180">
                          <template slot-scope="scope">
                            <img style="width:50px;height:50px" :src="scope.row.images">
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="操作">
                          <template slot-scope="scope" >
                              <el-button size="mini"  type="primary" icon="el-icon-edit" circle @click="showEditSkuMethod(scope.row.id)"></el-button>
                          </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column
                type="index"
                label="#"
                width="50">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题">
                </el-table-column>
                <el-table-column
                    prop="cname"
                    label="商品分类">
                </el-table-column>
                <el-table-column
                    prop="brandName"
                    label="品牌">
                </el-table-column>
                <el-table-column
                    prop="saleable"
                    label="是否上架">
                    <template slot-scope="scope">
                      <el-switch
                        v-model="scope.row.saleable"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                      </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope" >
                        <el-button size="mini" type="primary" icon="el-icon-edit" plain @click="showSpuUpdateMethod(scope.row.id)" ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加对话框 -->
        <el-dialog
          title= "添加商品"
          :visible.sync="addDialogVisible"
          width="50%"
          @close="clearAddForm">
          <!-- 对话框主体内容 -->
          <el-card>
            <el-steps :active="active" simple>
              <el-step title="基本信息" description=""></el-step>
              <el-step title="商品描述" description=""></el-step>
              <el-step title="规格参数" description=""></el-step>
              <el-step title="sku属性" description=""></el-step>
            </el-steps>
          </el-card>
          <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="80px">
            <el-card v-show="active==1" >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="商品分类" prop="category" >
                    <el-cascader :options="categories"
                     :props="defaultProps"
                     v-model="addForm.cids" @change="changeCid" clearable></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="12" >
                  <el-form-item label="所属品牌" prop="brand" >
                    <el-select v-model="addForm.spu.brandId" filterable placeholder="请选择">
                      <el-option
                        v-for="item in brands"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="商品标题" prop="title" >
                <el-input  v-model="addForm.spu.title"></el-input>
              </el-form-item>
              <el-form-item label="商品买点" prop="subTitle" >
                <el-input  v-model="addForm.spu.subTitle"></el-input>
              </el-form-item>
              <el-form-item label="包装清单" prop="packingList" >
                <el-input  v-model="addForm.spuDetail.packingList"></el-input>
              </el-form-item>
              <el-form-item label="售后服务" prop="afterService" >
                <el-input  v-model="addForm.spuDetail.afterService"></el-input>
              </el-form-item>
            </el-card>
            <el-card v-show="active==2" >
              <quill-editor ref="text" v-model="addForm.spuDetail.description" />
            </el-card>
            <el-card v-show="active==3" >
                <el-col v-for="(item) in spuSpec" :span=12 :key="item.id">
                  <el-form-item label-width="140px" :label="item.name" :prop="item.name" >
                    <el-input  v-model="item.value"></el-input>
                  </el-form-item>
                </el-col>
            </el-card>
            <el-card v-show="active==4" >
              <template v-for="(item,index) in skuSpec">
                <el-form-item :lable=item.name :key="item.id">
                    <h3>{{item.name}}：
                      <el-button size="mini" type="info" icon="el-icon-plus" circle @click="addSkuSpec(index)"></el-button>
                    </h3>
                  <el-row v-for="(item2,index2) in skuSpec[index].value" :key="index2">
                    <el-col :span="14">
                      <el-input v-model="skuSpec[index].value[index2]"></el-input>
                    </el-col>
                    <el-col :span="9">
                      <i class="el-icon-delete" @click="delSkuSpec(index, index2)"></i>
                    </el-col>
                  </el-row>
                </el-form-item>
              </template>
              <h3>SKU列表：</h3>
              <el-table
                :data="skuList"
                style="width: 100%">
                <el-table-column
                  v-for="(item,index) in this.skuSpec"
                  :key="index"
                  :prop="item.id + ''"
                  :label="item.name">
                </el-table-column>
                <el-table-column
                  label="图片">
                </el-table-column>
                <el-table-column
                  label="价格">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.price" ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="库存">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.stock" ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  type="selection"
                  label="是否启用">
                </el-table-column>
              </el-table>
            </el-card>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <span slot="footer" class="dialog-footer" v-show="active==1 || active==2 || active==3" >
            <el-button :disabled="active==1" @click="active--">上一步</el-button>
            <el-button @click="active++">下一步</el-button>
          </span>
          <!-- 对话框的操作按钮 -->
          <span slot="footer" class="dialog-footer" v-show="active==4" >
            <el-button @click="active--">上一步</el-button>
            <el-button type="primary" @click="add">保存商品信息</el-button>
          </span>
        </el-dialog>

        <!-- 修改spu -->
        <el-dialog
          title="编辑SPU"
          :visible.sync="showSpuUpdate"
          width="50%">
          <!-- 对话框主体内容 -->
          <!-- 对话框主体内容 -->
          <el-form ref="editSpuForm"  :model="editSpuForm" label-width="80px">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                  <el-form-item label="商品标题" prop="title" >
                    <el-input  v-model="editSpuForm.title"></el-input>
                  </el-form-item>
                  <el-form-item label="商品买点" prop="subTitle" >
                    <el-input  v-model="editSpuForm.subTitle"></el-input>
                  </el-form-item>
                  <el-form-item label="包装清单" prop="packingList" >
                    <el-input  v-model="editSpuForm.spuDetail.packingList"></el-input>
                  </el-form-item>
                  <el-form-item label="售后服务" prop="afterService" >
                    <el-input  v-model="editSpuForm.spuDetail.afterService"></el-input>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="规格参数" name="second">
                  <el-col v-for="(item) in editSpuForm.specParamVOList" :span=12 :key="item.id">
                    <el-form-item label-width="140px" :label="item.name" :prop="item.name" >
                      <el-input  v-model="item.value"></el-input>
                    </el-form-item>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="商品描述" name="third">
                  <quill-editor ref="text" v-model="editSpuForm.spuDetail.description" />
                </el-tab-pane>
                <el-tab-pane label="商品状态" name="status">
                  <el-form-item>
                    <el-switch
                    v-model="editSpuForm.saleable"
                    active-text="上架"
                    inactive-text="下架">
                    </el-switch>
                  </el-form-item>
                  <el-form-item>
                    <el-switch
                      v-model="editSpuForm.valid"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="有效"
                      inactive-text="无效">
                    </el-switch>
                  </el-form-item>
                </el-tab-pane>
              </el-tabs>
            </template>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <span slot="footer" class="dialog-footer" >
            <el-button @click="showSpuUpdate = false">关闭</el-button>
            <el-button type="primary" @click="editSpuMethod">修改商品信息</el-button>
          </span>
        </el-dialog>

        <!-- 修改sku -->
        <el-dialog
          title="编辑SKU"
          :visible.sync="showSkuUpdate"
          width="50%">
          <!-- 对话框主体内容 -->
          <!-- 对话框主体内容 -->
          <el-form ref="editSkuForm"  :model="editSkuForm" label-width="80px">
            <template>
              <el-tabs v-model="activeSkuName" @tab-click="handleClick">
                <el-tab-pane label="SKU信息" name="first">
                  <el-form-item label="商品标题" prop="title" >
                    <el-input  v-model="editSkuForm.sku.title"></el-input>
                  </el-form-item>
                  <el-form-item label="商品价格" prop="price" >
                    <el-input  v-model="editSkuForm.sku.price"></el-input>
                  </el-form-item>
                </el-tab-pane>
                <!-- <el-tab-pane label="规格参数" name="second">
                  <el-col v-for="(item) in editSpuForm.specParamVOList" :span=12 :key="item.id">
                    <el-form-item label-width="140px" :label="item.name" :prop="item.name" >
                      <el-input  v-model="item.value"></el-input>
                    </el-form-item>
                  </el-col>
                </el-tab-pane> -->
                <el-tab-pane label="SKU图片" name="third">
                    <!-- 上传组件 -->
                  <el-upload
                      :action="action"
                      list-type="picture-card"
                      ref="upload"
                      :before-upload="upload"
                      :data="dataOss"
                      :on-success="uploadSuccess"
                      :on-error="uploadError"
                      :on-remove="removeSkuImg">
                      <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="imgDialogVisible">
                      <img width="100%"  :src="editSkuForm.sku.images" alt="">
                  </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="SKU状态" name="status">
                  <el-form-item>
                    <el-switch
                      v-model="editSkuForm.sku.enable"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="有效"
                      inactive-text="无效">
                    </el-switch>
                  </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="SKU库存" name="stock">
                  <el-form-item label="秒杀库存" label-width="100px">
                    <el-input  v-model="editSkuForm.stock.seckillStock"></el-input>
                  </el-form-item>
                  <el-form-item label="秒杀总数量" label-width="100px">
                    <el-input  v-model="editSkuForm.stock.seckillTotal"></el-input>
                  </el-form-item>
                  <el-form-item label="库存数量" label-width="100px">
                    <el-input v-model="editSkuForm.stock.stock"></el-input>
                  </el-form-item>
                </el-tab-pane>
              </el-tabs>
            </template>
          </el-form>
          <!-- 对话框的操作按钮 -->
          <span slot="footer" class="dialog-footer" >
            <el-button @click="showSkuUpdate = false">关闭</el-button>
            <el-button type="primary" @click="showSkuUpdateMethod">修改商品信息</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  data () {
    return {
      defaultProps: {
        checkStrictly: true,
        children: 'categoryVOList',
        label: 'name',
        value: 'id'
      },
      // 搜索的关键字
      searchName: '',
      searchSaleable: true,
      // 用户列表集合
      usersList: [],
      // 页码
      page: 1,
      // 单页显示条数
      rows: 5,
      // 总数据条数
      total: 0,
      // 是否显示添加对话框
      addDialogVisible: false,
      // 是否显示修改spu对话框
      showSpuUpdate: false,
      // 是否显示修改sku
      showSkuUpdate: false,
      // 添加表单对象
      spuSpec: [], // 分类对应的SPU规格
      skuSpec: [], // 分类对应的SKU规格
      // 添加spu属性
      addForm: {
        cids: [],
        spuDetail: {
          description: '',
          genericSpec: '',
          specialSpec: '',
          packingList: '',
          afterService: ''
        },
        spu: {
          title: '',
          subTitle: '',
          cid1: null,
          cid2: null,
          cid3: null,
          brandId: '',
          saleable: false,
          valid: false
        },
        sku: {
          spuId: '',
          title: '',
          images: '',
          price: '',
          indexes: '',
          own_spec: '',
          enable: false
        }
      },
      // 修改spu
      editSpuForm: {
        // spu详细信息
        spuDetail: {
          description: '',
          genericSpec: '',
          specialSpec: '',
          packingList: '',
          afterService: ''
        },
        specParamVOList: [], // spu规格参数集合
        title: '',
        subTitle: '',
        cid1: null,
        cid2: null,
        cid3: null,
        brandId: '',
        saleable: null,
        valid: null
      },
      editSkuForm: {
        sku: {
          spuId: '',
          title: '',
          images: '',
          price: '',
          indexes: '',
          own_spec: '',
          enable: false
        },
        stock: {
          skuId: '',
          seckillStock: '',
          seckillTotal: '',
          stock: ''
        }
      },
      addFormRules: {
        uName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 4, max: 15, message: '长度在4-15之间', trigger: 'blur' }
        ]
      },
      activeName: 'first', // tabs 选择状态
      activeSkuName: 'first',
      brands: [], // 品牌集合
      skuBySpu: [],
      active: 1,
      value: '',
      content: '',
      categories: [],
      // 保存上传接口的地址
      action: 'https://ricervcvcer-shopping.oss-cn-shenzhen.aliyuncs.com',
      dataOss: {},
      // 预览图片变量
      dialogImageUrl: '',
      // 图片预览对话框是否需要显示
      imgDialogVisible: false
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async getAllCategory () {
      const { data: result } = await this.$http.get('category-server/category/getAll')
      this.categories = result.data
    },
    async changeCid () {
      this.brands = null
      if (this.addForm.cids.length !== 3) {
        this.$message.warning('请选择三级分类')
        return
      }
      const { data: result } = await this.$http.get('category-server/category/id/' + this.addForm.cids[2])
      this.brands = result.brands
      // 查询品牌SPU对应的 规格参数
      const { data } = await this.$http.get('goods-server/tb-spec-param/cid/' + this.addForm.cids[2])
      const spec = data.data
      this.spuSpec = []
      this.skuSpec = []
      spec.forEach(element => {
        if (element.generic) {
          this.spuSpec.push(element)
        } else {
          // eslint-disable-next-line no-array-constructor
          element.value = new Array()
          element.value.push('')
          this.skuSpec.push(element)
        }
      })
    },
    async getGoodsList () {
      const param = { page: this.page, rows: this.rows, spuName: this.searchName, searchSaleable: this.searchSaleable }
      const { data: result, status: state } = await this.$http.post('goods-server/spu/page', this.$qs.stringify(param))
      if (state !== 200) {
        return this.$message.error('查询失败')
      }
      this.usersList = result.data.records
      this.total = result.data.total
    },
    handleSizeChange (size) {
      this.rows = size
      this.getGoodsList()
    },
    handleCurrentChange (page) {
      // 将需要访问的页面赋值给vue的遍历page
      this.page = page
      // 然后重写调用查询方法，查询方法会使用最新的page进行分页查询
      this.getGoodsList()
    },
    searchUsers () {
      this.getGoodsList()
    },
    clearAddForm () {
      // 初始化添加表单数据
      this.$refs.addForm.resetFields()
    },
    clearEditForm () {
      // 初始化修改表单数据
      this.$refs.editForm.resetFields()
    },
    add () {
      // 设置SPU规格属性
      var b = {}
      this.spuSpec.forEach(item => {
        b[item.id] = item.value
      })
      this.addForm.spuDetail.genericSpec = JSON.stringify(b)

      // 设置SKU规格熟悉
      // eslint-disable-next-line no-array-constructor
      var a = {}
      this.skuSpec.forEach(item => {
        a[item.id] = item.value
      })
      this.addForm.spuDetail.specialSpec = JSON.stringify(a)
      this.addForm.skuList = this.skuList

      // 发送 请求添加商品
      this.$http.post('goods-server/goods/add', this.addForm).then(function (response) {
        if (response.data.result === 'SUCCESS') {
          this.$message.success('添加商品成功')
          this.addForm = null
        } else {
          this.$message.error(response.message)
        }
      }).catch(error => {
        // console.log(error.response.data)
        // console.log(error.response.status)
        // console.log(error.response.headers)
        this.$message.warning(error.response.data.msg)
      })
      this.addDialogVisible = false
    },
    addSkuSpec (i) {
      this.skuSpec[i].value.push('')
    },
    delSkuSpec (index, index2) {
      this.skuSpec[index].value.splice(index2, 1)
    },
    towIncrement () {
      let arrlen = 1
      // 计算总长度
      this.skuSpec.forEach(item => {
        arrlen = arrlen * item.value.length
      })
      const arr = new Array(arrlen)
      for (let i = 0; i < arrlen; i++) {
        const arr0 = []
        for (let j = 0; j < this.skuSpec.length; j++) {
          arr0[j] = 0
        }
        arr[i] = arr0
      }
      // 当前sku属性个数
      const len = this.skuSpec.length
      // 循环总长度
      for (let i = 1; i < arrlen; i++) {
        for (let k = 0; k < len; k++) {
          arr[i][k] = arr[i - 1][k]
        }
        for (let j = 0; j < len; j++) {
          // 如果这一列的上一次的值不等于当前sku属性的长度，当前的值就等于上一次的值+1
          if (this.skuSpec[j].value.length - 1 !== arr[i][j]) {
            arr[i][j] = arr[i - 1][j] + 1
            break
          } else {
            // 如果这一列的上一次的值等于这个sku属性的长度的话那么这一列的下标就重新计算
            // 本次不结束循环，对下一列的值做判断
            arr[i][j] = 0
          }
        }
      }
      return arr
    },
    // 显示修改spu对话框
    async showSpuUpdateMethod (spuId) {
      const { data: result } = await this.$http.get('goods-server/goods/joinById/' + spuId)
      console.log(result.data)
      this.editSpuForm = result.data
      this.showSpuUpdate = true
    },
    // 修改spu
    editSpuMethod () {
      this.$http.post('goods-server/goods/editSpu', this.editSpuForm).then(response => {
        console.log(response)
        if (response.data.result === 'SUCCESS') {
          this.$message.success('修改成功')
          this.editSpuForm = null
          this.activeName = 'first'
          this.getGoodsList()
        } else {
          this.$message.error(response.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
      this.showSpuUpdate = false
    },
    // 修改sku
    showEditSkuMethod (id) {
      this.$http.get('goods-server/sku/id/' + id).then(response => {
        this.editSkuForm = response.data.data
        // this.imgDialogImageUrl.push(this.editSkuForm.sku.images)
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
      this.showSkuUpdate = true
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    showSkuUpdateMethod () {
      this.$http.post('goods-server/sku/editSku', this.editSkuForm).then(response => {
        console.log(response)
        if (response.data.result === 'SUCCESS') {
          this.$message.success('修改成功')
          this.activeSkuName = 'first'
          this.editSkuForm = []
          this.getGoodsList()
        } else {
          this.$message.error(response.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
      this.showSkuUpdate = false
    },
    async upload (file) {
      // 文件名，和后台约定
      // const fileName = 'devicesource' + file.uid + file.name
      const reponse = await this.$http.get('ricervcvcer-third-party/oss/policy')// 索要签名
      console.log(reponse)
      this.dataOss = {
        key: reponse.data.data.dir + '/' + file.uid + '_' + file.name,
        ossAccessKeyId: reponse.data.data.accessid,
        policy: reponse.data.data.policy,
        signature: reponse.data.data.signature,
        dir: reponse.data.data.dir,
        host: reponse.data.data.hoast
      } // 上传额外参数
      console.log(this.action + '/' + reponse.data.data.dir + '/' + file.uid + '_' + file.name)
      this.editSkuForm.sku.images = this.action + '/' + reponse.data.data.dir + '/' + file.uid + '_' + file.name
      console.log(this.editSkuForm.sku.images)
    },
    uploadError () {
      this.$message.error('图片上传失败！')
    },
    uploadSuccess () {
      this.$message.success('图片上传成功！')
      this.photos.push(this.addressOss + '' + this.dataOss.key)
    },
    // 移除sku图片
    async removeSkuImg (file) {
      console.log(this.dialogImageUrl)
      const formData = new FormData()
      formData.append('ossName', this.dialogImageUrl)
      await this.$http.post('ricervcvcer-third-party/oss/del', formData)
    },
    // 查询sku
    expand_sku (expandedRows) {
      if (expandedRows.skuList !== null) {
        return
      }
      this.$http.get('goods-server/goods/getSkuBySpuId/' + expandedRows.id).then(resp => {
        if (resp.data.result === 'SUCCESS') {
          expandedRows.skuList = resp.data.data
          expandedRows.skuList.forEach(sku => {
            sku.specParamVO.forEach(spec => {
              sku[spec.id + ''] = spec.value
            })
          })
        } else {
          this.$message.error(resp.message)
        }
      }).catch(error => {
        this.$message.warning(error.response.data.msg)
      })
    }
  },
  created () {
    this.getAllCategory()
    this.getGoodsList()
  },
  components: {
    quillEditor
  },
  computed: {
    skuList () {
      var arr = this.towIncrement()
      // console.log(arr)
      const skuList = new Array(arr.length)
      for (let k1 = 0; k1 < arr.length; k1++) {
        // let str = ' '
        const sku = {}
        for (let kk = arr[k1].length - 1; kk >= 0; kk--) {
          sku[this.skuSpec[kk].id + ''] = this.skuSpec[kk].value[arr[k1][kk]]
          // str += arr[k1][kk] + ' '
        }
        // console.log(str)
        skuList.push(sku)
      }
      return skuList
    }
  }
}
</script>

<style lang="less" scoped>
.photo {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
</style>
